<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-11-17 11:40:09
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 16:16:03
 * @FilePath: \blog\src\views\admin\system\user\components\AddDialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    v-model="addDialog"
    :title="title"
    :close-on-click-modal="false"
  >
    <amForm ref="baseForm" :form-item="formItem" :form-data="formData">
      <template #selector>
        <el-select
          v-model="formData.role"
          clearable
          placeholder="请选择"
          size="large"
        >
          <el-option
            v-for="(option, i) in roles"
            :label="option.label"
            :value="option.value"
            :key="i"
          />
        </el-select>
      </template>

      <template #password>
        <div v-if="title=='新增'">
          123456789
        </div>
        <div v-else>
          ******
        </div>
      </template>
    </amForm>
    <div style="width: 100%; border: 1px solid #f0f2f5"></div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="clostBtn">取消</el-button>
        <el-button
          type="primary"
          @click="
            title == '新增'
              ? submitForm(baseForm.formRef)
              : modifyForm(baseForm.formRef)
          "
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage, FormInstance } from "element-plus";
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import init from "./option";
import UserServiceApi from "../api/userServieApi";
const userServiceApi = new UserServiceApi();

const formItem=init.formItem
const baseForm = ref<HTMLElement | any>();


interface Props {
  addDialog: boolean;
  title: string;
  formData: any;
  roles: any;
}

const props = withDefaults(defineProps<Props>(), {
  addDialog: false,
  title: "",
  formData:() => {
    return {};
  },
  roles: () => {
    return [];
  }
});

const emit = defineEmits(["saveBtn", "clostBtn"]);

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      props.formData.status = 1;
      props.formData.password='123456789'
      console.log('新增---------'+props.formData)
      const data = await userServiceApi.addUser(props.formData);
      if (data.code == 200) {
        ElMessage.success("新增成功！");
      }
      emit("saveBtn");
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const modifyForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let {password,...params} =props.formData
      const data = await userServiceApi.modifyUser(params);
      if (data.code == 200) {
        ElMessage.success("编辑成功！");
      }
      emit("saveBtn");
      formEl.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const clostBtn = () => {
  emit("clostBtn");
  baseForm.value.formRef.resetFields();
};
</script>

<style lang="scss">
@import "@/assets/style/dialog.scss";
</style>

<style lang="scss">
.el-dialog__body {
  padding-left: 50px !important;
}
</style>
